<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./swiper/package/swiper-bundle.min.css">
    <script src="./js/ajax.js"></script>
    <script src="./js/cookie.js"></script>
    </style>
    <style>
        .swiper-container {
            height: 470px;
        }

        .wh {
            width: 190px;
            height: 150px;
            margin-bottom: 5px;
        }
    </style>
</head>

<body>
    <div id="serveMain">
        <div class="serveMain">
            <div>广东</div>
            <ul>
                <li class="denglv">
                    <a href="./html/login.html">你好，请登录</a>
                    <a href="./html/register.html">免费注册</a>
                </li>
                <li>
                    <a href="">我的订单</a>
                </li>
                <li>
                    <a href="">我的京东</a>
                </li>
                <li><a href="">京东会员</a></li>
                <li><a href="">企业采购</a></li>
                <li><a href="">客户服务</a></li>
                <li><a href="">网站导航</a></li>
                <li><a href="">手机京东</a></li>
            </ul>
        </div>
    </div>
    <div id="header">
        <div class="header">
            <div class="logo"><img src="./images/sprite.png" alt=""></div>
            <div class="Box">
                <div class="searech">
                    <div class="searechBox">
                        <input type="text">
                        <span></span>
                    </div>
                    <a href="./html/car.html">我的购物车</a>
                </div>

                <div class="nav">
                    <ul>
                        <li><a href="">首页</a></li>
                        <li><a href="./html/list.html">各类商品</a></li>
                        <li><a href="">PLUS会员</a></li>
                        <li><a href="">品牌闪购</a></li>
                        <li><a href="">拍卖</a></li>
                        <li><a href="">京东家电</a></li>
                        <li><a href="">京东超市</a></li>
                        <li><a href="">京东生鲜</a></li>
                        <li><a href="">京东国际</a></li>
                        <li><a href="">京东云</a></li>
                    </ul>
                </div>
            </div>

        </div>


    </div>
    </div>
    <div id="banner">
        <div class="banner">
            <div class="box1"></div>
            <!-- 大轮播 -->
            <div class="box2">
                <div class=" banner1 swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="./images/1.jpg" alt=""></div>
                        <div class="swiper-slide">
                            <img src="./images/2.jpg" alt=""></div>
                        <div class="swiper-slide">
                            <img src="./images/3.jpg" alt=""></div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>

                    <!-- 如果需要滚动条 -->
                    <!-- <div class="swiper-scrollbar"></div> -->
                </div>
            </div>

            <!----------------三位一体轮播 ----------------------->
            <div class="box3">
                <div class="banner2 swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img class="wh" src="./images/02.png" alt="">
                            <img class="wh" src="./images/01.png" alt="">
                            <img class="wh" src="./images/55.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img class="wh" src="./images/02.png" alt="">
                            <img class="wh" src="./images/01.png" alt="">
                            <img class="wh" src="./images/55.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img class="wh" src="./images/02.png" alt="">
                            <img class="wh" src="./images/01.png" alt="">
                            <img class="wh" src="./images/55.jpg" alt="">
                        </div>
                        <!-- </div> -->
                    </div>
                    <!-- 如果需要分页器 -->
                    <!-- <div class="swiper-pagination"></div> -->

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>

                    <!-- 如果需要滚动条 -->
                    <!-- <div class="swiper-scrollbar"></div> -->
                </div>
            </div>

            <div class="box4"></div>
        </div>

    </div>
    </div>
    <div id="seckill">
        <div class="seckill">
            <div class="seckillBox">
                <div class="txt">秒杀倒计时</div>
                <div class="hour"></div>
                <!-- 小时与分钟之间的冒号 -->
                <span class="h_m">:</span>
                <div class="minute"></div>
                <!-- 分钟与秒之间的冒号 -->
                <span class="m_s">:</span>
                <div class="second"></div>
            </div>
            <div class="slideshow">


                <div class="banner3 swiper-container">
                    <div class="swiper-wrapper">
                        <!-- <div class="content">
                            <img src="./images/aa.jpg" alt="">
                            <h6>"【520告白季礼物】红谷包包女包新款潮流行百搭腋下包女牛皮复古洋气单肩新款手提包 米白"</h6>
                            <div>
                                <span style="background-color: red;">￥61516</span>
                                <span>￥13515</span>
                            </div>
                        </div>
                        
                        <div class="content">
                            <img src="./images/aa.jpg" alt="">
                            <h6>"【520告白季礼物】红谷包包女包新款潮流行百搭腋下包女牛皮复古洋气单肩新款手提包 米白"</h6>
                            <div>
                                <span style="background-color: red;">￥61516</span>
                                <span>￥13515</span>
                            </div>
                        </div> -->
                    </div>
                    <!-- 如果需要分页器 -->
                    <!-- <div class="swiper-pagination"></div> -->

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>

                    <!-- 如果需要滚动条 -->
                    <!-- <div class="swiper-scrollbar"></div> -->
                </div>

            </div>

            <div class="left">
                <img src="./images/999.jpg" alt="">
            </div>
        </div>
    </div>



    <div id="discounts">
        <div class="discounts">
            <div class="sale">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
            </div>
            <div class="sale2">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
            </div>
        </div>
    </div>

    <div id="discover">
        <div class="discover">
            <div><img src="./images/888.png" alt=""></div>
            <div class="slideshow2"></div>
        </div>
    </div>
    <div id="more">
        <div class="more">
            <h2>为你推荐</h2>
            <div class="commodity">
                <!-- <div>
                    <img src="./images/555.jpg" alt="">
                    <div>
                        <a href="./html/detail.html">MMW 乳胶床垫席梦思弹簧榻榻米黄麻椰棕床垫酒店软硬两用1.8米1.5m独立弹簧软床垫 软硬两面:独立袋弹簧+黄麻棕+乳胶
                            180cm*200cm</a>
                        <span>￥234561.00</span>
                    </div>

                </div>
                <div><a href="./html/detail.html">2</a></div>
                <div><a href="./html/detail.html">3</a></div>
                <div><a href="./html/detail.html">4</a></div>
                <div><a href="./html/detail.html">5</a></div> -->

                <!--    <div><a href="./html/detail.html">1</a></div>  
              <div><a href="./html/detail.html">2</a></div>
              <div><a href="./html/detail.html">3</a></div>
              <div><a href="./html/detail.html">4</a></div>
              <div><a href="./html/detail.html">5</a></div>
            </div> -->
            </div>

        </div>
    </div>


    </div>

    </div>
    <div class="jumbotron">
        <!-- <h1>暂时没有写首页，你可以去列表页看看数据</h1> -->
        <p><a class="btn btn-primary btn-lg" href="html/list.html" role="button">跳转列表页</a></p>
    </div>

    <script src="./swiper/package/swiper-bundle.min.js"></script>
    <script src="./js/index.js"></script>

</body>

</html>